<template>
    <el-card class="scroll-item" shadow="always">
        <div slot="header" class="d-flex align-items-center">
            <i class="iconfont icon-archive"></i>
            <span>{{ cardHeader }}</span>
        </div>
        <div class="text item">
            <nuxt-link
                v-for="(item, index) in archives" :key="index"
                :to="{ path: '/archives', query: { year: item.year, month: item.month } }" class="el-link"
                active-class="current" exact>
                {{ item.year + '年' + item.month + '月' }}
            </nuxt-link>
        </div>
    </el-card>
</template>

<script>
export default {
    name: 'ArchiveDom',
    props: {
        cardHeader: {
            type: String,
            required: true
        },
        archives: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    },
    methods: {
        view(year, month) {
            this.$router.push({ path: `/archives/${year}/${month}` })
        }
    }
}
</script>
<style lang="less" scoped>
.el-card {
    i {
        font-size: 14px;
        color: #437dff;
        font-weight: bold;
    }

    span {
        font-weight: bold;
    }

    .item {
        width: 100%;
        font-size: 14px;

        .el-link {
            display: inline-block;
            width: 50%;
            line-height: 2;

            &:hover {

                color: #409EFF;
                // background: linear-gradient(90deg, #2db7f5, #6bc30d);

            }

        }

    }

}
</style>